<script setup>
import {ref} from "vue";
import {style} from "uview-plus/libs/mixin/style";

defineProps({
  time: {
    type: Number,
    default: 30 * 60 * 60 * 1000
  },
  beforeText: {
    type: String,
    default: '距结束'
  },
  format: {
    type: String,
    default: 'DD:HH:mm:ss'
  },
  isDay: {
    type: Boolean,
    default: true
  },
  isHms: {
    type: Boolean,
    default: true
  },
  isColor: {
    type: Boolean,
    default: false
  },
  timeColor: {
    type: Object,
    default: {}
  },
  isTimeColor: {
    type: Boolean,
    default: false
  },
  timeStyle: {
    type: Object,
    default: {}
  },
  isBeforeText: {
    type: Boolean,
    default: false
  }
})

// 使用 reactive 创建响应式对象
const timeData = ref({});

// 定义 onChange 方法
const onChange = (e) => {
  timeData.value = e;
};
</script>

<template>
  <up-count-down
      :time="time"
      :format="format"
      autoStart
      millisecond
      @change="onChange"
  >
    <view class="time">
      <view class="time__item" v-if="format.indexOf('DD') !== -1">
        <text v-if="isBeforeText" style="color: #3D3D3D" :style="isColor ? timeColor : ''">{{ beforeText }}</text>&nbsp;
        <text :style="isTimeColor ? timeStyle : ''">{{ timeData.days }}</text>
        <text v-if="isDay" :style="isColor ? timeColor : ''">天</text>
      </view>
      <view class="time__item" v-if="format.indexOf('HH') !== -1">
        <text :style="isTimeColor ? timeStyle : ''">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
        <text v-if="isHms">时</text>
        <text v-else :style="isColor ? timeColor : ''">:</text>
      </view>
      <view class="time__item" v-if="format.indexOf('mm') !== -1">
        <text :style="isTimeColor ? timeStyle : ''">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
        <text v-if="isHms">分</text>
        <text v-else :style="isColor ? timeColor : ''">:</text>
      </view>
      <view class="time__item" v-if="format.indexOf('ss') !== -1">
        <text :style="isTimeColor ? timeStyle : ''">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
        <text v-if="isHms">秒</text>
      </view>
    </view>
  </up-count-down>
</template>

<style scoped lang="scss">
.time {
  @include flex;
  align-items: center;

  &__item {
    color: #666666;
    font-size: 24rpx;
    text-align: center;
  }

  .number_color {
    color: #FF4253;
    font-size: 26rpx;
    font-weight: bold;
  }
}
</style>